import React, {Component} from 'react';
import {observer, inject} from 'mobx-react'
import {List, Button} from 'antd-mobile';
import preCss from './pre.css'

const Item = List.Item;


@inject('carOrderStore')
@observer
class CarPay extends Component {

    onBridgeReady() {

    }

    componentDidMount() {
        if (typeof WeixinJSBridge === "undefined") {
            if (document.addEventListener) {
                document.addEventListener('WeixinJSBridgeReady', () => this.onBridgeReady(), false);
            } else if (document.attachEvent) {
                document.attachEvent('WeixinJSBridgeReady', () => this.onBridgeReady());
                document.attachEvent('onWeixinJSBridgeReady', () => this.onBridgeReady());
            }
        } else {
            this.onBridgeReady();
        }
    }

    render() {
        const {orderInfo, payments, parkingTime, paySubmit, detail, commCode, attach2} = this.props.carOrderStore;
        return (<div>
                <div style={{
                    backgroundColor: '#5DB75D',
                    width: '100%',
                    height: '180px',
                    fontSize: '25px',
                    textAlign: 'center',
                    lineHeight: '180px',
                    color: '#fff'
                }}>
                    {payments > 0 ? '应付费用：' + payments + '元' : '不需要缴纳费用'}
                </div>
                <List>
                    <Item extra={orderInfo ? orderInfo.plateNumber : ''}>车牌号</Item>
                    <Item extra={orderInfo ? orderInfo.parkName : ''}>停车场</Item>
                    <Item extra={parkingTime ? parkingTime : ''}>停车时长</Item>
                </List>

                {typeof WeixinJSBridge === "undefined" ?
                    <form action="/api/v2/pay/anon/alipay/H5/order">
                        <input type="hidden" name="totalFee" value="0.01"/>
                        <input type="hidden" name="payableFee" value={payments}/>
                        <input type="hidden" name="orderType" value="CAR_ORDERED"/>
                        <input type="hidden" name="commCode" value={commCode}/>
                        <input type="hidden" name="body" value="车辆预约出场"/>
                        <input type="hidden" name="detail" value={detail}/>
                        <input type="hidden" name="attach" value={orderInfo ? orderInfo.plateNumber : ''}/>
                        <input type="hidden" name="attach2" value={attach2}/>
                        {payments > 0 ?
                            <div style={{
                                width: '100%',
                                position: 'fixed',
                                bottom: 0
                            }}>
                                <button type="submit" className="am-button am-button-submit" style={{width: '100%'}}>
                                    确定支付
                                </button>
                            </div> : ''}
                    </form>
                    :
                    payments > 0 ?
                        <div style={{
                            width: '100%',
                            position: 'fixed',
                            bottom: 0
                        }}>
                            <Button className="am-button-submit" onClick={() => paySubmit(this.props)}>确定支付</Button>
                        </div> : ''
                }
            </div>
        );
    }
}

export default CarPay;